<template>
	<view class="box">
		<z-paging ref="paging" @onRefresh="onRefresh" @query="query" v-model="list"
			empty-view-img="http://cdn.uviewui.com/uview/empty/data.png" :empty-view-style="{'margin-bottom':'100rpx'}">
			<view class="search">
				<input type="text" placeholder="请输入关键词" placeholder-class="search-ac" v-model="params.shi_shu">
				<image :src="mixiImgUrl + '/static/ss.png'" mode="" @click="search"></image>
			</view>
			<view class="list">
				<view class="list-item" v-for="it in list">
					<view class="list-item-name">{{it.shi_shu}}</view>
					<view class="list-item-title">行辈：</view>
					<view class="list-item-subTitle">
						<text>{{it.hang_bei}}</text>
					</view>
					<view class="list-item-title">字辈：</view>
					<view class="list-item-subTitle">
						<text v-for="item in it.zi_bei">{{item.key}}</text>
					</view>
					<view class="list-item-title">支派房公：</view>
					<view class="list-item-subTitle">
						<text v-for="item in it.fang_gong">{{item}}</text>
					</view>
				</view>
			</view>
			<template #bottom>
				<view class="add flex-center">
					<view class="flex-center" @click="add">
						新增
					</view>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script>
	import {
		genealogyGenerationListHttp
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				list: [],
				params: {
					shi_shu: ''
				}
			}
		},
		methods: {
			search(){
				this.$refs.paging.reload();
			},
			query(pageNo, pageSize) {
				console.log('触底', pageNo, pageSize)
				//this.onReachBottomReset()
				let token = uni.getStorageSync('token')
				if (!token) return
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
				//this.reload(true)
			},
			init(pageNo, pageSize) {
				let params = {
					...this.params,
					page: pageNo
				}
				this.loading = true
				console.log('params', params, this.params)

				genealogyGenerationListHttp(params).then(res => {
					//this.$refs.paging.complete([]);
					res.data.forEach(k=>{
						let d = []
						
						k.zi_bei.forEach(i=>{
							
							
							i.value.forEach(j=>{
								d.push(j.value)
							})
						})
						k.fang_gong = d
					})
					
					
					this.$refs.paging.complete(res.data);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
			
			add(){
				uni.navigateTo({
					url:'/pages/genealogy-characters/add'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}

	.box {
		padding: 30rpx 0;
	}

	.search {
		width: 686rpx;
		height: 78rpx;
		background: rgba(132, 100, 59, 0.25);
		border-radius: 39rpx;
		margin: 0 auto;
		display: flex;
		box-sizing: border-box;
		padding: 0 10rpx 0 30rpx;
		align-items: center;
		margin-bottom: 30rpx;

		input {
			min-width: 0;
			height: 100%;
			flex: 1;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #84643B;
		}

		.search-ac {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #84643B;
		}

		image {
			width: 66rpx;
			height: 66rpx;
			margin-left: 30rpx;
		}
	}

	.list {
		width: 690rpx;
		margin: 0 auto;

		.list-item {
			width: 690rpx;

			background: #EFE9DD;
			border-radius: 24rpx;
			padding: 37rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;

			.list-item-name {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin-bottom: 31rpx;
			}

			.list-item-title {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #84643B;
				margin-bottom: 10rpx;
			}

			.list-item-subTitle {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 30rpx;

				text {
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}

			.list-item-subTitle:last-child {
				margin-bottom: 0;
			}
		}
	}
	.add {
		width: 750rpx;
		height: 142rpx;
		background: #F6F1E7;
		view {
			width: 704rpx;
			height: 98rpx;
			background: #84643B;
			border-radius: 16rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>